<template>
  <div class="address_list">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav titelText="地址列表"></header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <lodding-card :isLodding="isLodding">
        <van-address-list
          v-model="chosenAddressId"
          :list="data?.list"
          :disabled-list="data?.disabledList"
          disabled-text="以下地址超出配送范围"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
          @select="selectDefault"
        />
      </lodding-card>
    </div>

    <!-- 底部 -->
    <div class="footer_body"></div>
  </div>
</template>

<script setup name="addressList">
import headerNav from "@/components/common/headerNav.vue"; // 引入导航栏组件
import loddingCard from "@/components/common/loddingCard.vue"; // 引入lodding组件
import { onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { configureInit } from "@/common/js/configure"; // 引入路由缓存触发工具

const store = useStore();
const router = useRouter();
let chosenAddressId = ref("");
let isLodding = ref(true);
const data = reactive({
  list: [],
  disabledList: [],
});

// 获取列表数据
const getList = () => {
  store
    .dispatch("My/getAddersslist")
    .then((res) => {
      isLodding.value = false;
      if (res?.code === 20000) {
        chosenAddressId = res.data.list.filter((item) => {
          return item?.isDefault;
        })?.[0].id;
        data.list = res?.data?.list;
        data.disabledList = res?.data?.disabledList;
      }
    })
    .catch(() => {
      isLodding.value = false;
    });
};

// 添加地址
const onAdd = () => {
  router.replace({ path: "addressEdit" });
};

// 修改地址
const onEdit = (item) => {
  router.replace({
    path: "addressEdit",
    query: { addressId: item?.id },
  });
};

// 切换地址触发
const selectDefault = (item) => {
  const dataArr = data.list.map((it) => {
    return {
      ...it,
      isDefault: it?.id === item?.id ? true : false,
    };
  });
  data.list = dataArr;
};

onMounted(() => {
  configureInit(() => {
    console.log("缓存页面时--总监听事件接收--用于初始化操作");
    getList();
  });
});
</script>
<style lang="less" scoped>
.address_list {
  width: 100%;
}
</style>
